<template>
  <div class="contarner-page" @click.stop="showLanguageHandel">
    <page-header ref="languageRef"></page-header>
    <main>
      <div class="blog-content">
        <div class="background">
          <div class="content flex_between container">
            <div class="u-icon">
              <img :src="authorObj.authorPortrait" class="img" alt="" />
            </div>
            <div class="u-info">
              <div class="col1">authors</div>
              <div class="col2">{{ authorObj.authorName }}</div>
              <div class="col3">{{ authorObj.position }}</div>
              <div class="col4">
                {{ authorObj.authorDescription }}
              </div>
            </div>
          </div>
        </div>
        <div class="flex_content container">
          <div class="Article-content" v-if="dataList.length != 0">
            <div class="art-title">Most Recent Articles</div>
            <div class="art-list">
              <div class="item" :key="k" v-for="(item, k) in dataList">
                <nuxt-link :to="`/blog${item.url}`">
                  <div class="flex_ccenter">
                    <div class="tit shou">{{ item.articleTitle }}</div>
                    <div class="time">Update：{{ item.updateTime }}</div>
                  </div>
                </nuxt-link>
              </div>
            </div>
          </div>
          <div class="squad-content" v-if="authorList.length != 0">
            <div class="squad-tit">The Blog Squad</div>
            <div class="squad-list flex_">
              <div
                class="item shou flex_center"
                :key="k"
                v-for="(item, k) in authorList"
              >
                <div class="center-box">
                  <nuxt-link :to="`/blog/author${item.authorUrl}`">
                    <img :src="item.authorPortrait" class="img" alt="" />
                    <div class="col1">{{ item.authorName }}</div>
                    <div class="col2">{{ item.position }}</div>
                    <div class="col3">{{ item.articleCount }} articles</div>
                  </nuxt-link>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
    <footer>
      <div class="container">
        <div class="footer-content">
          <div class="footer-link">
            <div class="row flex_between">
              <div class="col-12">
                <div class="link-label fw700 c-000 f-21">Tools</div>
                <ul class="list-unstyled c-ccc f-16">
                  <li>
                    <nuxt-link to="/instagram-story-download"
                      >Instagram Story Downloader</nuxt-link
                    >
                  </li>
                  <li>
                    <nuxt-link to="/instagram-reels-video-download"
                      >Instagram Reels Downloader</nuxt-link
                    >
                  </li>
                  <li>
                    <a href="https://savingtik.com/" target="_blank"
                      >Tiktok Downloader</a
                    >
                  </li>
                </ul>
              </div>
              <div class="col-6">
                <div class="link-label fw700 c-000 f-21">Support</div>
                <ul class="list-unstyled c-ccc f-16">
                  <li>
                    <nuxt-link to="/contact"> Contact </nuxt-link>
                  </li>
                  <li>
                    <nuxt-link to="/blog"> Blog </nuxt-link>
                  </li>
                </ul>
              </div>
              <div class="col-6">
                <div class="link-label fw700 c-000 f-21">Legal</div>
                <ul class="list-unstyled c-ccc f-16">
                  <li>
                    <nuxt-link to="/terms-of-service">
                      Terms of Service
                    </nuxt-link>
                  </li>
                  <li>
                    <nuxt-link to="/privacy-policy"> Privacy Policy </nuxt-link>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="copyright flex_ccenter">
            <b class="fw700 f-21 c-000"
              >We are not affiliated with Instagram or Meta</b
            >
            <div class="c-ccc f-16">
              © {{ new Date().getFullYear() }} Insta Downloader All rights
              reserved.
            </div>
          </div>
        </div>
      </div>
    </footer>
  </div>
</template>
          
          <script>
import { mapState, mapGetters, mapMutations } from "vuex";
import pageHeader from "~/components/page-header.vue";
import SuccessContent from "~/components/success-content.vue";
import CryptoJS from "crypto-js";
import { handleClick, checkString } from "@/plugins/Firebase.js";
import { encryptUrl, decryptUrl } from "~/utils/encryption";

export default {
  components: { pageHeader, SuccessContent },
  head() {
    return {
      title: this.myTitle,
      script: this.myScript,
      meta: [
        {
          name: "description",
          content: this.myDescription,
        },
        {
          itemprop: "name",
          content: this.myTitle,
        },
        { property: "og:locale", content: "en" },

        { name: "twitter:card", content: "summary" },
        { name: "twitter:title", content: this.myTitle },
        { name: "twitter:description", content: this.myDescription },

        { name: "twitter:site", content: "SavingInsta" },
        { property: "og:title", content: this.myDescription },
        { property: "og:type", content: "article" },

        { property: "og:description", content: this.myDescription },
        { property: "og:site_name", content: "SavingInsta" },
        { name: "google", content: "notranslate" },
      ],
      link: this.myLinks,
    };
  },
  data() {
    return {
      myLinks: [],
      pageNo: 1,
      pageSize: 99999,
      total: 0,
      continues: 4,
      dataList: [],
      authorObj: {},
      authorList: [],
    };
  },
  async asyncData({ env, route }) {
    let authorObj = {};
    let authorList = [];
    let dataList = [];
    let authorDtl = {};
    let myScript = [];
    let myTitle = "";
    let myDescription = "";
    const id = route.path.replace("/blog/author", "");
    const authorDetailResult = encryptUrl(
      JSON.stringify({
        id: id,
        packageName: "WebIns",
      }),
      env
    );
    const authorArticlesResult = encryptUrl(
      JSON.stringify({
        pageSize: 99999,
        pageNo: 1,
        packageName: "WebIns",
        authorUrl: id,
      }),
      env
    );

    //准备第三个请求，这个请求没有传递额外的参数
    const allAuthorsResult = encryptUrl(
      JSON.stringify({ packageName: "WebIns" }),
      env
    );

    try {
      let [authorDetailResponse, authorArticlesResponse, allAuthorsResponse] =
        await Promise.all([
          fetch("https://savinginsta.com/js/a/api/cms/author/authorById", {
            method: "POST",
            body: JSON.stringify({ condition: authorDetailResult }),
            headers: { "Content-Type": "application/json" },
          }),
          fetch("https://savinginsta.com/js/a/api/cms/web/listData", {
            method: "POST",
            body: JSON.stringify({ condition: authorArticlesResult }),
            headers: { "Content-Type": "application/json" },
          }),
          fetch("https://savinginsta.com/js/a/api/cms/author/allAuthor", {
            method: "POST",
            body: JSON.stringify({ condition: allAuthorsResult }),
            headers: { "Content-Type": "application/json" },
          }),
        ]);

      if (!authorDetailResponse.ok) {
        throw new Error("Error fetching author details");
      }
      if (!authorArticlesResponse.ok) {
        throw new Error("Error fetching author articles");
      }
      if (!allAuthorsResponse.ok) {
        throw new Error("Error fetching all authors");
      }

      const authorDetailData = await authorDetailResponse.json();
      const authorArticlesData = await authorArticlesResponse.json();
      const allAuthorsData = await allAuthorsResponse.json();
      if (authorDetailData.data) {
        const decryptedData = await decryptUrl(authorDetailData.data, env);
        const result = JSON.parse(decryptedData);
        if (authorDetailData.code === 200) {
          authorObj = result;
        }
      }

      if (authorArticlesData.data) {
        const decryptedData = await decryptUrl(authorArticlesData.data, env);
        const result = JSON.parse(decryptedData);
        dataList = result.list.map((x) => {
          const date = new Date(x.updateTime);
          return {
            ...x,
            updateTime: `${date.toLocaleString("en-US", {
              month: "short",
            })} ${date.getDate()}, ${date.getFullYear()}`,
          };
        });
      }
      if (allAuthorsData.data) {
        const decryptedData = await decryptUrl(allAuthorsData.data, env);
        const result = JSON.parse(decryptedData);

        // 过滤掉当前作者
        authorList = result.filter((item) => item.id != authorObj.id); // 假设返回的每个作者对象都有一个 "id" 属性
      }
      myTitle = authorObj.pageTitle;
      myDescription = authorObj.pageDescription;
      let sameAs = "https://savingtik.com/blog/author" + authorObj.authorUrl;
      let article = {};
      let find = dataList.find((x) => x.state == 3);
      if (find) {
        article = find;
      } else {
        article.headline = "";
        article.url = "";
        article.datePublished = "";
      }
      myScript = [
        {
          json: {
            "@context": "https://schema.org",
            "@type": "ProfilePage",
            mainEntity: {
              "@type": "Person",
              name: authorObj.authorName, //作者名字
              description: authorObj.pageDescription, //作者元描述
              image: authorObj.authorPortrait, //作者头像
              sameAs: [sameAs], //作者url
              interactionStatistic: {
                "@type": "InteractionCounter",
                interactionType: "https://schema.org/WriteAction",
                userInteractionCount: authorObj.articleCount, //作者文章总数
              },
            },
            hasPart: [
              {
                "@type": "Article",
                headline: article.articleTitle, //作者后台recomends标签文章标题
                url: "https://savingtik.com/blog" + article.url, //作者推荐文章url
                datePublished: article.createTime, //作者推荐文章发布日期
                author: {
                  "@id": authorObj.id, //作者唯一数据id
                  name: authorObj.authorName, //作者名字
                },
              },
            ],
          },
          type: "application/ld+json",
        },
      ];

      // 返回值
      return {
        authorObj,
        authorList,
        dataList,
        myTitle,
        myScript,
        myDescription,
      };
    } catch (error) {
      console.error("asyncData error:", error);
      return {
        authorObj,
        authorList,
        dataList,
        myTitle,
        myScript,
        myDescription,
      };
    }
  },
  mounted() {
    this.myLinks.push({
      rel: "canonical",
      href: "https://savinginsta.com" + this.$route.path,
    });
    this.setAuthorObj();
  },
  computed: {
    ...mapGetters(["language"]),
    currentObj() {
      return this.currentList[this.current];
    },
    current() {
      return this.list1.findIndex((x) => x == this.language);
    },
  },
  methods: {
    setAuthorObj() {
      let article = {};
      let find = this.dataList.find((x) => x.state == 3);
      if (find) {
        article = find;
      } else {
        article.headline = "";
        article.url = "";
        article.datePublished = "";
      }
      this.myTitle = this.authorObj.pageTitle;
      this.myDescription = this.authorObj.pageDescription;
      let sameAs =
        "https://savinginsta.com/blog/author" + this.authorObj.authorUrl;
      this.myScript = [
        {
          json: {
            "@context": "https://schema.org",
            "@type": "ProfilePage",
            mainEntity: {
              "@type": "Person",
              name: this.authorObj.authorName, //作者名字
              description: this.authorObj.pageDescription, //作者元描述
              image: this.authorObj.authorPortrait, //作者头像
              sameAs: [sameAs], //作者url
              interactionStatistic: {
                "@type": "InteractionCounter",
                interactionType: "https://schema.org/WriteAction",
                userInteractionCount: this.authorObj.articleCount, //作者文章总数
              },
            },
            hasPart: [
              {
                "@type": "Article",
                headline: article.articleTitle, //作者后台recomends标签文章标题
                url: "https://savinginsta.com/blog" + article.url, //作者推荐文章url
                datePublished: article.createTime, //作者推荐文章发布日期
                author: {
                  "@id": this.authorObj.id, //作者唯一数据id
                  name: this.authorObj.authorName, //作者名字
                },
              },
            ],
          },
          type: "application/ld+json",
        },
      ];
    },
    encryptUrl(input) {
      let CIPHER_ALGORITHM = "DES-CBC";
      let IV_SIZE = 8;
      let KEY_PWD = process.env.DES_CMS_KEY;
      try {
        const keyBytes = CryptoJS.enc.Utf8.parse(KEY_PWD);
        const inputBytes = CryptoJS.enc.Utf8.parse(input);
        const ivBytes = CryptoJS.lib.WordArray.random(IV_SIZE);
        const encrypted = CryptoJS.DES.encrypt(inputBytes, keyBytes, {
          iv: ivBytes,
          mode: CryptoJS.mode.CBC,
          padding: CryptoJS.pad.Pkcs7,
        });
        const ciphertext = ivBytes.concat(encrypted.ciphertext);
        return ciphertext.toString();
      } catch (error) {
        console.error(error);
        return null;
      }
    },
    decryptUrl(cipherText) {
      let CIPHER_ALGORITHM = "DES-CBC";
      let IV_SIZE = 8;
      let KEY_PWD = process.env.DES_CMS_KEY;
      try {
        let keyBytes = CryptoJS.enc.Utf8.parse(
          KEY_PWD.padEnd(CIPHER_ALGORITHM === "DES-CBC" ? 8 : 16)
        );
        let ivBytes = { iv: CryptoJS.enc.Hex.parse(process.env.DES_CMS_IV) }; // 如果使用CBC模式，需要一个初始化向量iv，这里是空向量
        let decrypted = CryptoJS.DES.decrypt(
          { ciphertext: CryptoJS.enc.Hex.parse(cipherText) },
          keyBytes,
          ivBytes
        );
        return decrypted.toString(CryptoJS.enc.Utf8);
      } catch (e) {
        console.error(e);
        return null;
      }
    },

    showLanguageHandel() {
      this.$refs.languageRef.close();
    },
  },
};
</script>
  <style lang="scss" scoped>
input::-webkit-calendar-picker-indicator {
  display: none !important;
}

main {
  .blog-content {
    flex: 1;
    color: #fff;
    .background {
      background-color: #5c31d6;
      padding: 60px 0;
      .content {
        width: 100%;
        color: #fff;
        .u-icon {
          overflow: hidden;
          order: 2;
          width: 320px;
          height: 320px;
          border-radius: 12px;
        }
        .u-info {
          order: 1;
          flex: 1;
          max-width: 680px;
          .col1 {
            font-size: 18px;
            font-weight: 700;
          }
          .col2 {
            font-size: 56px;
            font-weight: 700;
            margin: 10px 0;
          }
          .col3 {
            font-size: 18px;
          }
          .col4 {
            margin-top: 40px;
            font-size: 18px;
          }
        }
      }
    }
    .flex_content {
      width: 100%;
      .Article-content {
        padding: 80px 0;
        width: 100%;
        .art-title {
          font-size: 56px;
          font-weight: 700;
          text-align: center;
          color: #1d212c;
        }
        .art-list {
          width: 100%;
          .item {
            width: 100%;

            padding: 40px 0;
            border-bottom: 1px solid #e2e2e2;
            .tit {
              margin: 20px 0;
              font-size: 32px;
              font-weight: 700;
              color: #3129dd;
            }
            .tit:hover {
              text-decoration: underline;
            }
            .time {
              font-size: 18px;
              color: #1d212c;
            }
          }
        }
      }
      .squad-content {
        color: #1d212c;
        .squad-tit {
          margin-top: 20px;
          text-align: center;
          font-size: 56px;
          font-weight: 700;
        }
        .squad-list {
          margin-top: 100px;
          flex-wrap: wrap;
          .item {
            width: 25%;
            margin-bottom: 40px;
            color: #1d212c;

            .center-box {
              .img {
                width: 210px;
                height: 210px;
                border-radius: 11px;
                margin-bottom: 10px;
              }
              .col1 {
                font-weight: 700;
                font-size: 18px;
              }
              .col1:hover {
                text-decoration: underline;
              }
              .col2 {
                font-size: 18px;
                color: rgba(29, 33, 44, 0.5);
                margin: 4px 0;
                max-width: 210px;
              }
              .col3 {
                font-weight: 700;
                font-size: 18px;
              }
            }
          }
        }
      }
    }
  }
}
footer {
  background-color: #f7f6f9;
  .footer-content {
    padding: 50px 0 30px;
    .row {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;

      .col-12 {
        flex: 0 0 auto;
        width: 33.33333333%;
      }
      .col-6 {
        flex: 0 0 auto;
        width: 33.33333333%;
      }
      .list-unstyled {
        margin-top: 20px;
        list-style: none;
        li {
          margin-bottom: 20px;
        }
        li:hover {
          color: #6f69e7;
        }
      }
    }
    .copyright {
      margin-top: 40px;
      div {
        margin-top: 8px;
      }
    }
  }
}
/* // 宽度小于992 */
@media (max-width: 992px) {
  main {
    .blog-content {
      flex: 1;
      color: #fff;
      .background {
        background-color: #5c31d6;
        padding: 30px 0px;
        .content {
          width: 100%;
          color: #fff;
          display: flex;
          flex-direction: column !important;
          text-align: center;
          .u-icon {
            overflow: hidden;
            order: 1;
            width: 190px;
            height: 190px;
            border-radius: 8px;
            margin-bottom: 20px;
          }
          .u-info {
            order: 2;
            flex: 1;
            .col1 {
              font-size: 16px;
              font-weight: 700;
            }
            .col2 {
              font-size: 30px;
              font-weight: 700;
              margin: 10px 0;
            }
            .col3 {
              font-size: 16px;
            }
            .col4 {
              margin-top: 20px;
              font-size: 16px;
            }
          }
        }
      }
      .flex_content {
        .Article-content {
          padding: 40px 0;
          width: 100%;
          color: #1d212c;
          .art-title {
            font-size: 30px;
            font-weight: 700;
            text-align: center;
          }
          .art-list {
            width: 100%;
            .item {
              width: 100%;
              padding: 30px 20px;
              text-align: center;
              border-bottom: 1px solid #e2e2e2;
              .tit {
                font-size: 22px;
                margin-bottom: 8px;
                font-weight: 700;
                color: #3129dd;
              }
              .tit:hover {
                text-decoration: underline;
              }
              .time {
                font-size: 16px;
              }
            }
          }
        }
        .squad-content {
          .squad-tit {
            text-align: center;
            font-size: 30px;
            font-weight: 700;
          }
          .squad-list {
            margin-top: 40px;
            flex-wrap: wrap;
            .item {
              color: #1d212c;
              margin-bottom: 20px;
              width: 31%;
              .center-box {
                .img {
                  overflow: hidden;
                  width: 150px;
                  height: 150px;
                  border-radius: 11px;
                  margin-bottom: 10px;
                }
                .col1 {
                  font-weight: 700;
                  font-size: 16px;
                }
                .col1:hover {
                  text-decoration: underline;
                }
                .col2 {
                  font-size: 16px;
                  color: rgba(29, 33, 44, 0.5);
                  margin: 4px 0;
                  max-width: 150px;
                }
                .col3 {
                  font-weight: 700;
                  font-size: 14px;
                }
              }
            }
          }
        }
      }
    }
  }
  .f-21 {
    font-size: 14px !important;
  }
}
/* // 宽度小于768 */
@media (max-width: 768px) {
  .container {
    padding: 0 14px;
  }
  .squad-list {
    display: flex;
    justify-content: space-between !important;
    margin-top: 40px;
    flex-wrap: wrap;
    align-items: flex-start;
    .item {
      margin-bottom: 20px;
      width: 45% !important;
      .img {
        overflow: hidden;
        width: 100%;
        height: 170px;
        border-radius: 11px;
        margin-bottom: 10px;
      }
      .col1 {
        font-weight: 700;
        font-size: 16px;
      }
      .col1:hover {
        text-decoration: underline;
      }
      .col2 {
        font-size: 16px;
        color: rgba(255, 255, 255, 0.5);
        margin: 4px 0;
      }
      .col3 {
        font-weight: 700;
        font-size: 14px;
      }
    }
  }
  footer {
    background-color: #f7f6f9;
    .footer-content {
      padding: 50px 0 30px;
      .row {
        display: flex;
        flex-wrap: wrap;
        .col-12 {
          flex: 0 0 auto;
          width: 100%;
        }
        .col-6 {
          flex: 0 0 auto;
          width: 50%;
        }
        .list-unstyled {
          margin-top: 20px;
          list-style: none;
          li {
            margin-bottom: 20px;
          }
        }
      }
      .copyright {
        margin-top: 40px;
        font-size: 14px !important;
        div {
          margin-top: 8px;
          font-size: 14px !important;
        }
      }
    }
  }
}
</style>
          